<template>
  <div class="clearfix">
    <a-upload :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
      <a-button>
        <upload-outlined />
        Select File
      </a-button>
    </a-upload>
    <a-button
      type="primary"
      :disabled="fileList.length === 0"
      :loading="uploading"
      style="margin-top: 16px"
      @click="handleUpload"
    >
      {{ uploading ? 'Uploading' : 'Start Upload' }}
    </a-button>
  </div>
</template>
<script>
import axios from 'axios'
import { UploadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { defineComponent, ref } from 'vue'
export default defineComponent({
  components: {
    UploadOutlined,
  },
  setup() {
    const fileList = ref([])
    const uploading = ref(false)
    const handleRemove = file => {
      const index = fileList.value.indexOf(file)
      const newFileList = fileList.value.slice()
      newFileList.splice(index, 1)
      fileList.value = newFileList
    }
    const beforeUpload = file => {
      fileList.value = [...fileList.value, file]
      return false
    }
    const handleUpload = () => {
      const formData = new FormData()
      fileList.value.forEach(file => {
        console.log(file)
        formData.append('files[]', file)
      })
      uploading.value = true

      // You can use any AJAX library you like
      axios('https://www.mocky.io/v2/5cc8019d300000980a055e76', {
        method: 'post',
        data: formData,
      }).then(() => {
        fileList.value = []
        uploading.value = false
        message.success('upload successfully.')
      }).catch(() => {
        uploading.value = false
        message.error('upload failed.')
      })
    }
    return {
      fileList,
      uploading,
      handleRemove,
      beforeUpload,
      handleUpload,
    }
  },
})
</script>